<template>
  <div id="container">
    <v-header></v-header>
    <section id="main">	
      <h1 class="headLine01">ログイン</h1>
      <div class="comBox">
        <div class="mailForm">
          <ul class="formList">
            <li><input type="text" autocomplete="off"  v-model="item.loginId" maxlength="30" placeholder="ログインアカウント"></li>
            <li><input type="password" v-model="item.passWord" maxlength="20" placeholder="パスワード"></li>
            <li><input type="button" @click="doLogin" value="ログインする"></li>
          </ul>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import Session from '@/helper/Session'
import vHeader from '@/components/Header.vue'
export default {
  data() {
    return {
      item: {
        loginId: '1',
        passWord: '123456'
      },
      rules: {}
    }
  },
  
  components: {
    vHeader
  },

  created() {
       this.Session.set('role-mode', 'manage');
  },
  methods: {
    doLogin() {
        let errNum = 0;
        this.rules = {};
        if (!this.item.loginId) {
            errNum++;
            this.rules.loginId = 'アカウントを入力してください';
        }
        if (!this.item.passWord) {
            errNum++;
            this.rules.passWord = 'パスワードを入力してください';
        }
        if (errNum > 0) return;
        this.$indicator.open();
        this.Api.post('loginId', this.item).then(res => {
            this.$indicator.close();
            if (res.data.code == 0) {
                let data = res.data.data;
                let userId = data.userId;
                this.Session.set('userId', data.userId);
                this.Session.set('loginName', data.loginName);
                this.Session.setApiAccessToken(data.token);
                this.$router.push('/manage/topmenu');
            }
      }).catch(err => {
        this.$indicator.close();
      });
    }
  }

}
</script>
